
/* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */
*{
    margin:0;
    padding:0;
}

li {
    list-style: none;
}

body{ 
    background-image: url(../images/界面背景/1.jpg);
    font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif; 
    text-align: center; 
    color: black; 
} 


header{ 
    width: 902px; 
    height: 203px; 
    padding-top: 0px; 
    margin: 0px auto; 
    } 


header h1 { 
    float:left; 
    font-size:2.9em; 
    padding-top:80px; 
    padding-left:40px; 
    font-family:Arial,verdana, sans-serif; 
    color: rgba(88, 255, 6, 1);
    text-shadow: 0 0 10px;
    font-weight:bolder; 
    letter-spacing:-1px; 
    } 

   
.back {
    width: 110px;
    height: 40px;
    margin-top: 150px;
    margin-left: 530px;
    font-size: 20px;
    font-weight: 700;
    background-color: #58ff06;
    border: 1px solid #37210c;
    text-shadow: 0 0 2px;
} 

.box{
    width: 902px;
    height:325px;
    margin:0 auto;
}

.box .firstul .firstli label {
    float: left;
    width: 145px;
    font-weight:normal; 
    font-size: 0.8em; 
    color: #ecf9ff; 
    text-shadow: 0 0 10px;
}


/* 清除li样式 */
.box .firstul .firstli{
    list-style: none;
}
/* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
/* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
.box .firstul{
    position:relative;
    display:flex;
}
/* 将三个li宽度平分，高度60px */
.box .firstli{
    flex:1;
    height:60px;
}
/* input隐藏 */
.firstli input{
    display:none;
}
/* 设置input的下一个节点label的样式 */
.firstli input+label{
    display:block;
    height:100%;
    background:#37210c;
    text-align: center;
    line-height: 60px;
}
/* 设置div内容的基础样式 隐藏内容div*/
.firstli input+label+div{
    display:none;
    position: absolute;
    left:0;
    top:50px;
}
/* input选中状态时候对应的label的样式 */
.firstli input:checked+label{
    background:blue;
    color:red;
}
/* input选中时候显示对应的div */
.firstli input:checked+label+div{
    display:block;
}


.box .firstd1 {
    font-size: 3em;
    font-weight: 700;
}

.box .firstd1 p{
    display: inline-block;

}

.box .firstd1 .onep {
    margin-top: 50px;
}

.box .firstd1 .twop {
    width: 590px;
}


aside{ 
    float:left; 
    list-style:none; 
    height:250px; 
    width: 147px;
    } 

aside ul{ 
    list-style:none; 
    width: 200px;
    margin-bottom:20px; 
    margin-top:20px; 
    margin-left:0px; 
    } 

aside li{ 
    width: 147px;
    text-align:left; 
    border-bottom:1px solid #07E0FC; 
    } 


aside ul li a{ 
    background-position:left center; 
    display:block; 
    background-color:rgba(13, 184, 164, 0.62); 
    line-height:4em; 
    margin-right:0px; 
    padding-top:6px; 
    padding-bottom:6px; 
    padding-left:22px; 
    color: black; 
    font-weight:normal; 
    font-size: 0.8em; 
    text-decoration: none; 
    width:125px; 
    } 




#firstd2{ 
    margin:0 auto; 
    width:902px; 
    height:290px; 
    clear:both; 
    } 


section{ 
    float:left; 
    width:80%; 
    height: 84%;
    margin-left:18px; 
    margin-top:20px; 
    background-color:rgba(8, 126, 136, 0.48); 
    text-align:left; 
    font-size:0.9em; 
    padding:5px; 
    } 


section h1{ 
    display:block; 
    font-size:0.9em; 
    width:50px; 
    text-align:left; 
    color:black; 
    font-family:arial;  
    padding:5px; 
    margin-top:5px; 
    margin-left:12px; 
    } 


section p{  
    font: normal 0.9em Arial, Verdana, Helvetica, sans-serif; 
    font-size:0.9em; 
    color: #000000; 
    padding:10px; 
    text-align:left; 
    } 

.firstd3 {
    margin-top: 50px;
    font-weight: 700;
}
.firstd3 .schinfor{
    margin-top: 10px;
    background-color: rgba(177, 112, 50, 0.56);
}

.firstd4 {
    margin-top: 50px;
    font-weight: 700;
}


.firstd5 li {
    float: left; 
    margin-top: 30px;
    margin-left: 20px;
}

.firstd5 div {
    float: left;
    height: 110px;
    border: 1px solid black;
    padding: 15px 15px;
    background-color: #ffffffb8;
}

.firstd5 div .p1 {
    width: 55px;
    margin-left: 20px;
    font-size: 10px;
    color: #674848;
}

.firstd5 div .p2 {
    margin: 10px auto;
}

.firstd5 div button {
    margin: 10px auto;
}

footer { 
    width:902px; 
    height: 85px; 
    clear:both; 
    margin-top: 10px; 
    color:#F9FF0D; 
    font-weight:700; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom: 0px; 
    padding-top: 15px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    } 


footer p{ 
    font-size:0.7em; 
    font-family:arial; 
    font-weight:700; 
    line-height: 1.4em; 
    color:#F9FF0D; 
    padding:25px 0 0 10px; 
    text-align:center; 
    } 

footer hr {
    width: 100%;
}
